@charset "utf-8";
/* 头部 */
header{
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 98px;
	padding: 0 40px 0 47px;
	.logo {
		width: 69px;
		height: 65px;
		img {
			width: 100%;
		}
	}
	nav {
		display: flex;
		ul {
			display: flex;
			li {
				position: relative;
				display: flex;
				margin-left: 80px;
				a {
					text-align: center;
					h3 {
						font-size: 16px;
						color: #0d0d0d;
						transition: all .5s;
					}
					span {
						font-size: 14px;
						color: #838383;
						transition: all .5s;
					}
				}
				&:hover a h3, &:hover a span {
					color: #12b2a5;
				}
				&::before {
					content: "";
					position: absolute;
					left: 0;
					top: 0;
					background-color: #d6d6d6;
					transition: all 1s;
				}
				&::after {
					content: "";
					position: absolute;
					right: 0;
					top: 0;
					background-color: #d6d6d6;
					transition: all 1s;
				}
				&:hover::before {
					width: 1px;
					height: 40px;
					transform: translateY(-25px) rotate(35deg);
				}
				&:hover::after {
					width: 1px;
					height: 40px;
					transform: translateY(25px) rotate(35deg);
				}
			}
			.active {
				position: relative;
				a h3,a span {
					color: #12b2a5;
				}
				&::before {
					content: "";
					position: absolute;
					left: 0;
					top: 0;
					width: 1px;
					height: 40px;
					transform: translateY(-25px) rotate(35deg);
					background-color: #d6d6d6;
				}
				&::after {
					content: "";
					position: absolute;
					right: 0;
					top: 0;
					width: 1px;
					height: 40px;
					transform: translateY(25px) rotate(35deg);
					background-color: #d6d6d6;
				}
			}
		}
		.weixin {
			margin-left: 67px;
		}
	}
}
// 内容
.main {
	.m_content {
		position: relative;
		width: 780px;
		height: 380px;
		margin: 0 auto;
		.c_content {
			position: absolute;
			top: 0;
			right: 0;
			width: 512px;
			height: 100%;
			h4 {
				position: relative;
				text-align: center;
				margin-top: 122px;
				font-size: 32px;
				&::after {
					content: "";
					position: absolute;
					top: -20px;
					left: 50%;
					transform: translateX(-50%);
					width: 40px;
					height: 10px;
					background-color: #ffd205;
					border-radius: 10px;
				}
			}
			p {
				margin-top: 30px;
				text-align: justify;
				font-size: 12px;
				line-height: 1.5;
			}
			.button {
				margin-top: 48px;
				text-align: center;
				span {
					display: inline-block;
					padding: 0 30px;
					height: 35px;
					line-height: 35px;
					color: #0c595a;
					border: 1px solid #c5c5c4;
					border-radius: 35px;
					cursor: pointer;
					margin: 5px;
					font-weight: bold;
					&:hover {
						color: white;
						background-color: #0c595a;
					}
				}
			}
		}
	}
	.m_center {
		width: 100%;
		height: 319px;
		background-image: url(../img/banner_02.png);
		.info {
			display: flex;
			justify-content: space-between;
			width: 904px;
			margin: 0 auto;
			.i_left {
				position: relative;
				&>img {
					position: absolute;
					top: 0;
					left: 0;
					transform: translateY(-50%);
				}
				&>img:first-child {
					width: 221px;
					height: 461px;
				}
				&>img:last-child {
					left: 20px;
					width: 183px;
					height: 327px;
				}
			}
			.i_right {
				margin-top: 60px;
				display: flex;
				li {
					margin-left: 40px;
					font-size: 18px;
					text-align: center;
					.showImg {
						width: 84px;
						height: 84px;
						line-height: 84px;
						border: 1px solid white;
						border-radius: 50%;
						img {
							vertical-align: middle;
						}
					}
					p:first-of-type {
						color: white;
						margin-top: 15px;
					}
					p:last-of-type {
						color: #84e5e6;
					}
				}
			}
		}
	}
	.m_method {
		width: 780px;
		margin: 0 auto;
		text-align: center;
		&>h4 {
			position: relative;
			margin-top: 117px;
			font-size: 30px;
			font-weight: normal;
			&::before {
				content: "";
				position: absolute;
				width: 40px;
				height: 10px;
				left: 50%;
				top: -20px;
				transform: translateX(-50%);
				background-color: #ffd205;
				border-radius: 10px;
			}
		}
		&>p {
			font-size: 14px;
		}
		&>ul {
			display: flex;
			justify-content: space-between;
			align-items: flex-end;
			margin-top: 50px;
			li {
				position: relative;
				&>div {
					h5 {
						margin-top: 35px;
						font-size: 22px;
					}
					p {
						font-size: 14px;
					}
				} 
				&:not(:last-child)::after {
					content: "";
					position: absolute;
					right: -70px;
					top: 80px;
					width: 24px;
					height: 47px;
					background: url(../img/right_arrow.png);
				}
				&:nth-child(1)>div {
					transform:translateX(-16px);
				}
				&:nth-child(2)>div {
					transform:translateX(-26px);
				}
			}
		}
	}
}
// 尾部
footer {
	position: relative;
	img {
		display: block;
		width: 100%;
	}
	p {
		position: absolute;
		left: 50%;
		top: 70%;
		transform: translateX(-50%);
		color: white;
		font-size: 12px;
	}
}